<template>
  <div class="match_item">
    <div style="flex: 1">
      <ItemDetail :match="match" />
    </div>
    <div class="flex_column width_164 DINAlternate">
      <div class="flex">
        <div
          class="width_52 button1"
          v-for="(item, index) in matchs.fullM.odds"
          :class="index + 1 != matchs.fullM.odds.length ? 'margin_right_4' : ''"
          :key="index"
          @click.stop
        >
          <div :class="activeClass(activematch, 'full', 'M', matchs.fullM.pk_ratio, index)">
            <div
              v-if="item.nav_data != ''"
              @click.stop="
                dialogStore.openNewDialog(
                  match,
                  item.pk_odds_key,
                  matchs.fullM.pk_ratio,
                  item.pk_ratio,
                  index
                )
              "
            >
              {{ item.odd }}
            </div>
            <div v-else>
              <img src="@/assets/lock.png" style="width: 16px; height: 16px" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="flex margin_top_4">
        <div
          class="width_52 button1"
          v-for="(item, index) in matchs.halfM.odds"
          :class="index + 1 != matchs.halfM.odds.length ? 'margin_right_4' : ''"
          @click.stop
          :key="index"
        >
          <div :class="activeClass(activematch, 'half', 'M', matchs.halfM.pk_ratio, index)">
            <div
              v-if="item.nav_data != ''"
              @click.stop="
                dialogStore.openNewDialog(
                  match,
                  item.pk_odds_key,
                  matchs.halfM.pk_ratio,
                  item.pk_ratio,
                  index
                )
              "
            >
              {{ item.odd }}
            </div>
            <div v-else>
              <img src="@/assets/lock.png" style="width: 16px; height: 16px" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex_column width_60 DINAlternate">
      <div class="flex center">
        <div class="width_20 button2" v-if="showpkratio(matchs.fullR.odds)">{{ matchs.fullR.pk_ratio }}</div>
        <img v-else src="@/assets/lock.png" style="width: 18px; height: 18px" alt="" />
      </div>
      <div class="flex margin_top_4 center">
        <div class="width_20 button2" v-if="showpkratio(matchs.halfR.odds)">{{ matchs.halfR.pk_ratio }}</div>
        <img v-else src="@/assets/lock.png" style="width: 18px; height: 18px" alt="" />
      </div>
    </div>
    <div class="flex_column width_108 DINAlternate">
      <div class="flex">
        <div
          class="width_52 button1"
          v-for="(item, index) in matchs.fullR.odds"
          :class="index + 1 != matchs.fullR.odds.length ? 'margin_right_4' : ''"
          @click.stop
          :key="index"
        >
          <div :class="activeClass(activematch, 'full', 'R', matchs.fullR.pk_ratio, index)">
            <div
              v-if="item.nav_data != ''"
              @click.stop="
                dialogStore.openNewDialog(
                  match,
                  item.pk_odds_key,
                  matchs.fullR.pk_ratio,
                  item.pk_ratio,
                  index
                )
              "
            >
              {{ item.odd }}
            </div>
            <div v-else>
              <img src="@/assets/lock.png" style="width: 16px; height: 16px" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="flex margin_top_4">
        <div
          class="width_52 button1"
          v-for="(item, index) in matchs.halfR.odds"
          :class="index + 1 != matchs.halfR.odds.length ? 'margin_right_4' : ''"
          @click.stop
          :key="index"
        >
          <div :class="activeClass(activematch, 'half', 'R', matchs.halfR.pk_ratio, index)">
            <div
              v-if="item.nav_data != ''"
              @click.stop="
                dialogStore.openNewDialog(
                  match,
                  item.pk_odds_key,
                  matchs.halfR.pk_ratio,
                  item.pk_ratio,
                  index
                )
              "
            >
              {{ item.odd }}
            </div>
            <div v-else>
              <img src="@/assets/lock.png" style="width: 16px; height: 16px" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex_column width_60 DINAlternate">
      <div class="flex center">
        <div class="width_20 button2" v-if="showpkratio(matchs.fullOU.odds)">{{ matchs.fullOU.pk_ratio }}</div>
        <img v-else src="@/assets/lock.png" style="width: 18px; height: 18px" alt="" />
      </div>
      <div class="flex margin_top_4 center">
        <div class="width_20 button2" v-if="showpkratio(matchs.halfOU.odds)">{{ matchs.halfOU.pk_ratio }}</div>
        <img v-else src="@/assets/lock.png" style="width: 18px; height: 18px" alt="" />
      </div>
    </div>
    <div class="flex_column width_108 DINAlternate">
      <div class="flex">
        <div
          class="width_52 button1"
          v-for="(item, index) in matchs.fullOU.odds"
          :class="index + 1 != matchs.fullOU.odds.length ? 'margin_right_4' : ''"
          @click.stop
          :key="index"
        >
          <div :class="activeClass(activematch, 'full', 'OU', matchs.fullOU.pk_ratio, index)">
            <div
              v-if="item.nav_data != ''"
              @click.stop="
                dialogStore.openNewDialog(
                  match,
                  item.pk_odds_key,
                  matchs.fullOU.pk_ratio,
                  item.pk_ratio,
                  index
                )
              "
            >
              {{ item.odd }}
            </div>
            <div v-else>
              <img src="@/assets/lock.png" style="width: 16px; height: 16px" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="flex margin_top_4">
        <div
          class="width_52 button1"
          v-for="(item, index) in matchs.halfOU.odds"
          :class="index + 1 != matchs.halfOU.odds.length ? 'margin_right_4' : ''"
          @click.stop
          :key="index"
        >
          <div :class="activeClass(activematch, 'half', 'OU', matchs.halfOU.pk_ratio, index)">
            <div
              v-if="item.nav_data != ''"
              @click.stop="
                dialogStore.openNewDialog(
                  match,
                  item.pk_odds_key,
                  matchs.halfOU.pk_ratio,
                  item.pk_ratio,
                  index
                )
              "
            >
              {{ item.odd }}
            </div>
            <div v-else>
              <img src="@/assets/lock.png" style="width: 16px; height: 16px" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import ItemDetail from './ItemDetail.vue'

const props = defineProps({
  match: Object,
})

const { homeStore, homeState } = inject('HomeStore')
const { dialogStore, dialogState } = inject('DialogStore')

const matchs = computed(() => {
  let a = {}

  props.match.main_odds_data.forEach(item => {
    let result = item.pk_key.replace(/:/g, '')
    a[result] = item
  })

  return a
})

const activematch = computed(() => {
  let a = {}
  let foundItem = dialogState.dialogArr.find(item => item.ids === props.match.ids)
  if (foundItem && foundItem.show == true) {
    a = foundItem
  }
  return a
})

const activeClass = (activematch, pk_key1, pk_key2, pk_ratio, index) => {
  let str = ''
  if (
    activematch.pk_key1 == pk_key1 &&
    activematch.pk_key2 == pk_key2 &&
    activematch.pk_ratio == pk_ratio &&
    activematch.pkindex == index
  ) {
    str = 'activePkratio'
  }
  return str
}

const showpkratio = odds => {
  let a = false

  odds.forEach(item => {
    if (item.nav_data != '') {
      a = true
    }
  })
  return a
}
</script>

<style lang="scss" scoped>
.match_item {
  width: 100%;
  // height: 68px;
  background: #fff;
  margin-top: 4px;
  padding: 8px;
  display: flex;
  cursor: pointer;
}

.button1 {
  height: 24px;
  background-color: #f3f5fd;
  //   font-family: DINAlternate;
  font-size: 12px;
  font-weight: bold;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3711d8;
  }
}
.button2 {
  height: 24px;
  font-size: 12px;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.activePkratio {
  color: #3711d8 !important;
  background-color: #d5daff !important;
}

.center{
  height: 24px;
  justify-content: center;
  align-items: center;
}
</style>